<template>
  <div>
    <edit-server ref="editserver" @serverChange="editServerChange"></edit-server>
    <Table :datas="datas" :loading="loading">
      <TableItem title="#" prop="$serial" :width="80" align="center"></TableItem>
      <TableItem title="服务器标题" align="center" :width="280">
        <template slot-scope="{data}">
          <div class="text-ellipsis" v-width="280">{{data.configinfo.server_hostname}}</div>
        </template>
      </TableItem>
      <TableItem title="状态" :width="200" align="center">
        <template slot-scope="{data}">
          <b>
            <div class="primary-color" v-if="data.status==1">
              <i class="fas fa-play"></i>&nbsp;&nbsp;运行中
            </div>
            <div class="blue-color" v-if="data.status==0">
              <i class="fas fa-power-off"></i>&nbsp;&nbsp;未运行
            </div>
            <div class="yellow-color" v-if="data.status==2">
              <i class="fas fa-sync fa-spin"></i>&nbsp;&nbsp;正在重启...
            </div>
            <div class="yellow-color" v-if="data.status==3">
              <i class="fas fa-cog fa-spin"></i>&nbsp;&nbsp;正在安装/更新插件模块...
            </div>
            <div class="red-color" v-if="data.status==4">
              <i class="fas fa-power-off"></i>&nbsp;&nbsp;正在停机...
            </div>
            <div class="red-color" v-if="data.status==5">
              <i class="h-icon-spinner"></i>&nbsp;&nbsp;正在更新服务器...
            </div>
          </b>
        </template>
      </TableItem>
      <TableItem title="游戏端口" :width="80" align="center">
        <template slot-scope="{data}">
          <div class="primary-color">
            <b><i class="fas fa-project-diagram"></i>&nbsp;&nbsp;{{data.server_port}}</b>
          </div>
        </template>
      </TableItem>
      <!-- <TableItem title="RCON管理端口" :width="120" align="center">
        <template slot-scope="{data}">
          <div class="primary-color">
            <b><i class="fas fa-project-diagram"></i>&nbsp;&nbsp;{{data.configinfo.rcon_port}}</b>
          </div>
        </template>
      </TableItem> -->
      <!-- <TableItem title="APP端口" :width="80" align="center">
        <template slot-scope="{data}">
          <div class="primary-color">
            <b><i class="fas fa-project-diagram"></i>&nbsp;&nbsp;{{data.configinfo.app_port}}</b>
          </div>
        </template>
      </TableItem> -->
      <!-- <TableItem title="RCON密码" :width="120" align="center">
        <template slot-scope="{data}">
          <div class="blue-color">
            <b class="text-ellipsis" v-width="280"><i class="fas fa-lock"></i>&nbsp;&nbsp;{{data.configinfo.rcon_password}}</b>
          </div>
        </template>
      </TableItem>
      <TableItem title="GUID" prop="server_guid" align="center" :width="280">
      </TableItem>
      <TableItem title="创建时间" prop="createtime" sort="auto" align="center" :width="150"></TableItem> -->
      <TableItem title="编辑" :width="80" align="center">
        <template slot-scope="{data}">
          <button class="h-btn h-btn-s h-btn-primary" v-tooltip content="编辑服务器" @click="$refs.editserver.openEdit(data)">
            <i class="fas fa-edit"></i>
          </button>
        </template>
      </TableItem>
      <TableItem title="终端日志" :width="80" align="center">
        <template slot-scope="{data}">
          <button class="h-btn h-btn-s h-btn-text-primary" v-tooltip content="查看日志" @click="openTerminal(data.server_guid)">
            <i class="fas fa-terminal"></i>
          </button>
        </template>
      </TableItem>
      <TableItem title="操作" :width="170" align="center">
        <template slot-scope="{data}">
          <button class="h-btn h-btn-s h-btn-primary" v-tooltip content="启动" @click="run(data)">
            <i class="fas fa-play"></i>
          </button>&nbsp;&nbsp;<b style="color:#999;font-weight:100;">|</b>&nbsp;&nbsp;
          <button class="h-btn h-btn-s h-btn-blue" v-tooltip placement="top" content="重启" @click="restart(data)">
            <i class="fas fa-undo"></i>
          </button>&nbsp;&nbsp;<b style="color:#999;font-weight:100;">|</b>&nbsp;&nbsp;
          <button class="h-btn h-btn-s h-btn-red" v-tooltip placement="top" content="停止" @click="kill(data)">
            <i class="fas fa-power-off"></i>
          </button>

        </template>
      </TableItem>
      <template slot="expand" slot-scope="{data}">
        <Form readonly mode="twocolumn" :labelWidth="130">
          <FormItem label="RCON 管理端口" class="primary-color"><i class="fas fa-project-diagram"></i>&nbsp;&nbsp;{{data.configinfo.rcon_port}}</FormItem>
          <FormItem label="RCON 密码" class="blue-color"><i class="fas fa-lock"></i>&nbsp;&nbsp;{{data.configinfo.rcon_password}}</FormItem>
          <FormItem label="GUID">{{data.server_guid}}</FormItem>
          <FormItem label="到期时间">
            <span class="red-color">{{data.expiredate}}</span>
          </FormItem>
          <FormItem label="服务器更新">
            <Poptip content="此操作会停止当前服务器且会卸载插件框架（插件及数据会保留），是否继续此操作？" @confirm="updateGameServer(data)">
            <button style="height:30px;" class="h-btn h-btn-s h-btn-text-primary"><i class="fab fa-steam-symbol" style="font-size:16px"></i>&nbsp;&nbsp;更新服务器</button>
            </Poptip>
          </FormItem>
          <FormItem label="插件框架">
            <Poptip content="此操作会停止当前服务器，是否继续此操作？" @confirm="initPlugin(data)">
            <button style="height:30px;" class="h-btn h-btn-s h-btn-text-yellow"><i class="fas fa-cube" style="font-size:16px"></i>&nbsp;&nbsp;安装/更新插件框架</button>
            </Poptip>
          </FormItem>
        </Form>
        <Loading :loading="data.loading"></Loading>
      </template>
      <div slot="empty">暂时无服务器</div>
    </Table>
  </div>
</template>

<script>
import ModalTerminal from '@/components/terminal';
export default {
  data() {
    return {
      loading: true,
      datas: []
    }
  },
  mounted: function () {
    this.getServerList()
  },
  methods: {
    editServerChange(data) {
      this.getServerList()
    },
    async updateGameServer(data) {
      this.loading = true
      data.status = 4
      await this.$API.kill(data.server_guid)
      data.status = 5
      let ret = await this.$API.updategame(data.server_guid)
      if (ret.code < 0) {
        this.$Notice({
          type: 'error',
          title: '错误',
          content: ret.msg
        });
        data.status = 0
        this.loading = false
        return
      }
      data.status = 2
      await this.$API.run(data.server_guid)
      data.status = 1
      this.loading = false
    },
    async initPlugin(data) {
      this.loading = true
      data.status = 4
      await this.$API.kill(data.server_guid)
      data.status = 3
      let ret = await this.$API.initplugin(data.server_guid)
      if (ret.code < 0) {
        this.$Notice({
          type: 'error',
          title: '错误',
          content: ret.msg
        });
        data.status = 0
        this.loading = false
        return
      }
      data.status = 2
      await this.$API.run(data.server_guid)
      data.status = 1
      this.loading = false
    },
    openTerminal(guid) {
      this.$Modal({
        hasMask: false,
        className: 'terminal',
        closeOnMask: false,
        type: `drawer-right`,
        width: 500,
        component: {
          // 这里也可以定义异步调用
          // vue: (resolve) => {
          //   require(['./modalTest'], resolve);
          // },
          vue: ModalTerminal,
          datas: { guid } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success: (modal, data) => {
            console.warn(data)
          }
        }
      });
    },
    async getServerList() {
      this.loading = true
      this.datas = await this.$API.getserver()
      console.log(this.datas)
      this.loading = false
    },
    async restart(data) {
      this.loading = true
      data.status = 2
      await this.$API.kill(data.server_guid)
      await this.$API.run(data.server_guid)
      data.status = 1
      this.loading = false
      this.$Message({ type: 'success', text: '重启成功' });
    },
    // async syncData(data) {
    //   this.loading = true
    //   let ret = await this.$API.importdata(data.server_guid)
    //   if (ret.code == 0) {
    //     this.$Message({ type: 'success', text: ret.msg });
    //   }
    //   else {
    //     this.$Message({ type: 'error', text: ret.msg });
    //   }
    //   this.loading = false
    // },
    async run(data) {
      this.loading = true
      let ret = await this.$API.run(data.server_guid)
      if (ret.code == 0) {
        data.status = 1
        this.$Message({ type: 'success', text: ret.msg });
      }
      else {
        this.$Message({ type: 'error', text: ret.msg });
      }
      this.loading = false

    },
    async stop(data) {
      this.loading = true
      let ret = await this.$API.stop(data.server_guid)
      if (ret.code == 0) {
        data.status = 0
        this.$Message({ type: 'success', text: ret.msg });
      }
      else {
        this.$Message({ type: 'error', text: ret.msg });
      }
      this.loading = false

    },
    async kill(data) {
      this.loading = true
      let ret = await this.$API.kill(data.server_guid)
      if (ret.code == 0) {
        data.status = 0
        this.$Message({ type: 'success', text: ret.msg });
      }
      else {
        this.$Message({ type: 'error', text: ret.msg });
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less">
td {
  user-select: text;
}
</style>